<template>
	<!--商品规格-->
	<EmpireModal v-model="modelValue">
		<EmpireImageHorizontal :src="currentObj.profile" grid-template-row="1fr 1fr 1fr" grid-template-columns="1fr 3fr">
			<view class="spec-card__header">
				<text v-if="currentObj.discount" class="box-space">¥{{ currentObj.discount }}</text>
				<EmpireTag v-if="currentObj.discount" class="box-space" text="优惠价"></EmpireTag>
				<text class="empire-mall__origin-price">¥{{ currentObj.price }}</text>
			</view>
			<template #description>
				<EmpireTag text="七天无理由退货"></EmpireTag>
				<EmpireTag class="box-space" text="极速退款"></EmpireTag>
			</template>
		</EmpireImageHorizontal>
		<view class="spec-ls">
			<view class="">
				<view class="">
					<text>规格</text>
				</view>
				<view class="spect-pupop__size">
					<EmpireTag v-for="(item, key) in sizeSpecs" :key="key" :text="item"></EmpireTag>
				</view>
			</view>
			<view class="empire-mall__flex-between">
				<text>数量</text>
				<uni-number-box :min="1"></uni-number-box>
			</view>
		</view>
		<view class="spec-pupop__button">
			<button
				v-if="buttonText !== '立即购买'"
				type="warn"
				size="default"
				:plain="!buttonText"
				:style="{ margin: '0 15px' }"
				@click="handleClick"
			>
				加入购物车
			</button>
			<button
				v-if="buttonText !== '加入购物车'"
				type="warn"
				size="default"
				:style="{ margin: '0 15px' }"
				@click="handleClick"
			>
				立即购买
			</button>
		</view>
	</EmpireModal>
</template>

<script setup>
import EmpireModal from '@/components/empire-modal.vue';
import EmpireImageHorizontal from '@/components/empire-image/empire-image-horizontal.vue';
import EmpireTag from '@/components/empire-tag.vue';
import { computed } from 'vue';
import { useAppStore } from '@/store/store.js';
import { useAddCart } from '@/common/hooks/useAddCart.js';

const props = defineProps({
	src: {
		type: String,
		default: undefined
	},
	title: {
		type: String,
		default: undefined
	},
	subTitle: {
		type: String,
		default: undefined
	},
	buttonText: {
		type: String,
		default: undefined
	},
	list: {
		type: Array,
		default: []
	}
});

const store = useAppStore();
const modelValue = defineModel('modelValue', {
	type: Boolean,
	default: false
});

const modelCurrent = defineModel('current', {
	type: String,
	default: undefined
});
const emits = defineEmits(['success']);
const currentObj = computed(() => props.list[0]);
// const currentObj = computed(() => props.list.find((item) => item.serial === modelCurrent.value));
console.log(currentObj);
const sizeSpecs = computed(() => props.list.map((item) => `${item.spec}`));
const gridTemplateColumns = computed(() => {
	if (!props.buttonText) {
		return `1fr 1fr`;
	}
});
function handleClick() {
	modelValue.value = false;
	if (props.buttonText === '加入购物车') {
		useAddCart(currentObj.value);
		emits('success', currentObj.value);
	} else if (props.buttonText === '立即购买') {
		// 跳转到支付页
		uni.navigateTo({
			url: '/pages/cart/payment'
		});
	}
}
</script>

<style lang="scss" scoped>
.spec-card__header {
}
.spec-ls {
	margin: 0 15px;
	padding: 15px 0;
	border-bottom: 1px solid #e6e6e6;
}
.spect-pupop__size {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.spec-pupop__button {
	display: grid;
	grid-template-columns: v-bind(gridTemplateColumns);
	margin-top: 16rpx;
}
</style>
